أساسيات جافاسكربت اللازمة للعمل مع React

تُعتبر مكتبة React واحدة من أشهر مكتبات جافاسكربت لبناء واجهات المستخدم التفاعلية، وهي تستخدم بشكل واسع في تطوير تطبيقات الويب الحديثة. لكن لكي تتمكن من العمل بكفاءة مع React، لا بد من الإلمام بأساسيات جافاسكربت التي تُعتبر الركيزة الأساسية لبناء التطبيقات باستخدام هذه المكتبة. في هذا المقال سنغطي بشكل تفصيلي وموسع أهم مفاهيم جافاسكربت التي يجب أن يتقنها المطور ليكون قادرًا على استخدام React بفعالية، مع شرح كل مفهوم وأمثلة عملية لتوضيح كيفية تطبيقه في سياق تطوير تطبيقات React.

1. المتغيرات (Variables) وأنواع البيانات

في جافاسكربت، تُستخدم المتغيرات لتخزين البيانات، وتتضمن أنواع بيانات متعددة مثل النصوص (Strings)، الأعداد (Numbers)، القيم المنطقية (Boolean)، الكائنات (Objects)، والمصفوفات (Arrays). منذ ظهور ES6، أصبح هناك ثلاثة طرق لتعريف المتغيرات:

• var: طريقة قديمة لتعريف المتغيرات، ولكنها غير موصى بها بسبب مشكلات في نطاق المتغير (scope).

• let: تُستخدم لتعريف متغيرات يمكن تغيير قيمتها، ونطاقها يكون محليًا للكتلة التي تُعرف فيها.

• const: تُستخدم لتعريف متغيرات ذات قيمة ثابتة لا يمكن إعادة تعيينها.

في React، غالبًا ما نستخدم const و let خاصة عند تعريف الثوابت والمتغيرات التي تتغير مع الأحداث أو الحالات.

مثال على المتغيرات في React:

javascript
CopyEdit
const userName = "Ali";
let age = 25;
age = 26;  // التحديث مسموح مع let

2. الدوال (Functions)

الدوال هي لبنة أساسية في جافاسكربت، حيث تسمح بتنفيذ كود معين عند الحاجة. هناك عدة طرق لتعريف الدوال:

• الدوال التقليدية:

javascript
CopyEdit
function greet() {
  console.log("مرحبا");
}

• الدوال التعبيرية:

javascript
CopyEdit
const greet = function() {
  console.log("مرحبا");
};

• الدوال السهمية (Arrow Functions):

javascript
CopyEdit
const greet = () => {
  console.log("مرحبا");
};

في React، الدوال السهمية مستخدمة بشكل مكثف، خاصة في التعامل مع المكونات الوظيفية (Functional Components) والمعالجات (Handlers).

3. الكائنات (Objects) والمصفوفات (Arrays)

الكائنات والمصفوفات من أكثر أنواع البيانات استخدامًا في React، لأنها تساعد في تمثيل البيانات المعقدة.

الكائنات

الكائن هو مجموعة من الأزواج مفتاح-قيمة.

javascript
CopyEdit
const user = {
  name: "Ali",
  age: 25,
  isActive: true
};

المصفوفات

المصفوفة هي مجموعة من القيم المرتبة.

javascript
CopyEdit
const numbers = [1, 2, 3, 4, 5];

في React، تُستخدم المصفوفات كثيرًا لعرض القوائم والعناصر المتكررة داخل الواجهة.

4. التعامل مع المصفوفات والكائنات: الأساليب الهامة

جافاسكربت توفر العديد من الأساليب التي تسهل التعامل مع المصفوفات والكائنات، وأبرزها:

4.1. map

تُستخدم لتكرار المصفوفة وتحويل كل عنصر فيها.

javascript
CopyEdit
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled);  // [2, 4, 6]

في React، تُستخدم map عادةً لعرض مكونات متكررة.

4.2. filter

تُستخدم لتصفية المصفوفة بناءً على شرط معين.

javascript
CopyEdit
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);  // [2, 4]

4.3. reduce

تُستخدم لتجميع قيم المصفوفة في قيمة واحدة.

javascript
CopyEdit
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum);  // 10

5. الجمل الشرطية (Conditionals)

تُستخدم الجمل الشرطية لاتخاذ قرارات بناءً على شروط معينة. في React، تعتمد كثيرًا على هذه الجمل لإظهار أو إخفاء مكونات أو تعديل المحتوى.

5.1. if و else

javascript
CopyEdit
if (age > 18) {
  console.log("بالغ");
} else {
  console.log("قاصر");
}

5.2. التعبيرات الشرطية (Ternary Operator)

طريقة مختصرة للجمل الشرطية:

javascript
CopyEdit
const status = age > 18 ? "بالغ" : "قاصر";

في JSX (وهي صيغة كتابة React)، تُستخدم التعبيرات الشرطية بشكل كبير للتحكم في العرض:

jsx
CopyEdit
{isLoggedIn ? <Dashboard /> : <Login />}

6. التعامل مع الكائنات: الانتشار (Spread Operator) والتدمير (Destructuring)

هذان المفهومان مهمان جدًا عند تحديث الحالات (State) أو التعامل مع الخصائص (Props) في React.

6.1. التدمير (Destructuring)

يسمح باستخلاص القيم من الكائنات أو المصفوفات بسهولة.

javascript
CopyEdit
const user = { name: "Ali", age: 25 };
const { name, age } = user;
console.log(name);  // Ali

في React، غالبًا ما يُستخدم لفصل الخصائص داخل المكونات.

6.2. الانتشار (Spread Operator)

يستخدم لنسخ خصائص كائن أو عناصر مصفوفة في كائن أو مصفوفة جديدة.

javascript
CopyEdit
const user = { name: "Ali", age: 25 };
const newUser = { ...user, isActive: true };

في React، يُستخدم هذا الأسلوب عند تحديث الحالة لضمان الحفاظ على البيانات القديمة دون تعديلها مباشرة.

7. الـ ES6 Classes والوراثة

على الرغم من أن React الحديثة تميل لاستخدام المكونات الوظيفية (Functional Components) مع هوكس (Hooks)، إلا أن فهم الـ Classes مهم خاصة عند العمل مع المكونات الكلاسيكية (Class Components).

javascript
CopyEdit
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`مرحبا، أنا ${this.name}`);
  }
}

يمكن وراثة الصفوف:

javascript
CopyEdit
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
}

8. المكونات (Components) في React وطريقة كتابتها باستخدام جافاسكربت

المكون هو وحدة بناء React الأساسية، ويُكتب عادةً بطريقتين:

8.1. المكونات الوظيفية (Functional Components)

تعتمد على الدوال، وهي الأبسط والأكثر استخدامًا مع React الحديثة.

jsx
CopyEdit
function Greeting(props) {
  return <h1>مرحبا، {props.name}h1>;
}

أو باستخدام الدوال السهمية:

jsx
CopyEdit
const Greeting = ({ name }) => <h1>مرحبا، {name}h1>;

8.2. المكونات الكلاسيكية (Class Components)

تعتمد على إنشاء صف يحتوي على طريقة render.

jsx
CopyEdit
class Greeting extends React.Component {
  render() {
    return <h1>مرحبا، {this.props.name}h1>;
  }
}

9. الـ JSX: تركيب جافاسكربت مع HTML

JSX هي لغة توصيف تُمكّن من كتابة مكونات React بطريقة مشابهة لـ HTML داخل جافاسكربت.

jsx
CopyEdit
const element = <h1>مرحبًا بالعالمh1>;

تُترجم هذه الصيغة إلى استدعاءات دوال React React.createElement تحت الغطاء.

10. إدارة الحالة (State) واستخدام الـ Hooks في React

تُعتبر إدارة الحالة من أهم المفاهيم التي تعتمد عليها React لبناء تطبيقات تفاعلية.

10.1. useState Hook

تُستخدم في المكونات الوظيفية لإضافة حالة محلية.

jsx
CopyEdit
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>العدد الحالي: {count}p>
      <button onClick={() => setCount(count + 1)}>زيادةbutton>
    
  );
}

11. الأحداث (Events) ومعالجتها في React

تُستخدم الأحداث في React للتفاعل مع المستخدم، مثل الضغط على الأزرار أو إدخال نص.

jsx
CopyEdit
function Button() {
  function handleClick() {
    alert('تم الضغط على الزر!');
  }

  return <button onClick={handleClick}>اضغطنيbutton>;
}

في React، أسماء الأحداث تستخدم camelCase وليست جميعها نفس أسماء جافاسكربت الأصلية.

12. الوعود (Promises) والتعامل مع البيانات غير المتزامنة

غالبًا ما يحتاج المطور إلى التعامل مع البيانات القادمة من مصادر خارجية مثل APIs. يتم ذلك باستخدام الوعود.

javascript
CopyEdit
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

في React، غالبًا ما يتم استخدام async/await مع الوعود لجعل الكود أكثر وضوحًا.

13. التعامل مع النطاق (Scope) و الـ Closures

فهم كيفية عمل نطاق المتغيرات (Scope) مهم جدًا في جافاسكربت وخاصة مع التعامل مع الأحداث وحالة المكونات.

• النطاق المحلي: المتغيرات التي تُعرف داخل دالة أو كتلة لا يمكن الوصول إليها خارجها.

• النطاق العام: المتغيرات التي تُعرف خارج الدوال أو الكتل.

الـ Closures تسمح للدالة بالوصول إلى المتغيرات من نطاقها الخارجي حتى بعد انتهاء تنفيذ ذلك النطاق.

14. المصفوفات والخصائص الديناميكية في React

كثيرًا ما تتطلب التطبيقات عرض بيانات ديناميكية. في React، يتم ذلك باستخدام خاصية المفاتيح (Keys) داخل التكرار:

jsx
CopyEdit
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  li>
);

هذه الخاصية تساعد React في تتبع التغييرات بكفاءة.

15. التعامل مع الأخطاء (Error Handling)

في جافاسكربت، يُستخدم try...catch لمعالجة الأخطاء، خاصة في الحالات غير المتزامنة.

javascript
CopyEdit
try {
  // محاولة تنفيذ كود قد ينتج عنه خطأ
} catch (error) {
  console.error(error);
}

في React، يمكن إنشاء مكونات خاصة لمعالجة الأخطاء تُسمى Error Boundaries.

16. القوالب النصية (Template Literals)

طريقة جديدة لكتابة النصوص مع إمكانية تضمين المتغيرات بداخلها بسهولة.

javascript
CopyEdit
const name = "Ali";
const greeting = `مرحباً ${name}`;
console.log(greeting);  // مرحباً Ali

17. استخدام المكتبات الخارجية

جافاسكربت وReact تسمحان بسهولة دمج مكتبات خارجية مثل Axios لجلب البيانات، أو Lodash لمعالجة البيانات.

18. تنظيم الكود وتقسيمه إلى وحدات (Modules)

معظم المشاريع الحديثة تعتمد على تقسيم الكود إلى ملفات منفصلة، باستخدام import و export:

javascript
CopyEdit
// في ملف utils.js
export function add(a, b) {
  return a + b;
}

// في ملف آخر
import { add } from './utils';
console.log(add(2, 3));

ملخص الجدول لأهم أساسيات جافاسكربت مع React

المصادر والمراجع

1. MDN Web Docs – JavaScript Guide
   
   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

2. React Official Documentation
   
   https://reactjs.org/docs/getting-started.html

بامتلاك هذه الأساسيات، يصبح المطور قادرًا على استغلال قوة React لبناء تطبيقات ويب متقدمة وقابلة للتوسع، مع ضمان كتابة كود نظيف، منظم، وسهل الصيانة. المعرفة العميقة بجافاسكربت تشكل الأساس الذي يمكن البناء عليه لتطوير مهارات البرمجة بشكل مستمر وتحقيق إنتاجية عالية في بيئة تطوير React.